<template>
	<div>
		<router-link to='/' tag="div" class="header-abs" v-show="showAbs" >
			<span class="iconfont header-abs-back">&#xe641;</span>
		</router-link>
		<div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
			景点详情
			<router-link to='/' tag="div" class="header-abs-a">
				<span class="iconfont header-fixed-back">&#xe641;</span>
			</router-link>
		</div>
	</div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
	name: 'DetailHeader',
	data () {
		return {
			showAbs: true,
			opacityStyle: {
				opacityStyle: 0
			}
		}
	},
	methods: {
		handleScroll () {
			console.log(document.documentElement.scrollTop)
			alert(112233)
			const top = document.body.scrollTop		//document.documentElement.scrollTop浏览器不兼容时为0，
			console.log(document.body.scrollTop)	//改用document.body.scrollTop
			if (top>60) {
				let opacity = top /140
				opacity = opacity >1 ? 1 : opacity
				this.opacityStyle = { opacity }
				this.showAbs = false
			}
			else {
				this.showAbs = true
			}
		}
	}
	,
	activated () {
		window.addEventListener( 'scroll', this.handleScroll)			//全局函数  对整个页面都会造成影响不单单指当前组件
	},
	deactivated () {
		window.removeEventListener( 'scroll', this.handleScroll)			//离开当前页面时执行这个函数关闭上面的全局函数
	}
	
	
}
</script>

<style scoped>
	.header-abs{
		position: absolute;
		left: .2rem;
		top: .2rem;
		width: .8rem;
		height: .8rem;
		line-height: .8rem;
		border-radius: .4rem;
		text-align: center;
		background: rgba(0, 0, 0, .8);
	}
	.header-abs-a{
		position: absolute;
		left: .2rem;
		top: .01rem;
		width: .8rem;
		height: .8rem;
		line-height: .8rem;
		border-radius: .4rem;
		text-align: center;
	}
	.header-abs-back{
		font-size: .4rem;
		color: #fff;
	}
	.header-fixed{
		top: 0;
		left: 0;
		right: 0;
		position: fixed;
		height: .86rem;
		line-height: .86rem;
		text-align: center;
		color: #fff;
		background: #00bcd4;
		font-size: .32rem;
		z-index: 2;
	}
	.header-fixed-back{
		width: .64rem;
		text-align: center;
		font-size: .4rem;
		position: absolute;
		margin-left: -50%;
		margin: 0;
		padding: 0;
		left: 0;
		color: #fff;
	}
</style>